import React, { Component } from 'react'
// 引入路由
import { HashRouter as Router, Route, Link, Redirect ,withRouter} from 'react-router-dom'
// import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// import { MemoryRouter as Router, Route, Link } from 'react-router-dom'
//定义里面的组件
function Index() {
  return <h1>首页</h1>
}

class Product extends Component{
  constructor(props){
    super(props);
    console.log("Product 组件被渲染了");
  }
  render(){
    return <h1>Product 组件</h1>
  }
}
function User(props) {
  console.log(props);
  return <div>
    <h1>用户</h1>
    <button
      onClick={() => {
        props.history.push('/index')
      }}
    ></button>
  </div>;
}
let WithUser = withRouter(User)
function My() {
  return <h1>我</h1>
}
/* 404 页面 */
function PageNotFind() {
  return <h1>404</h1>;
}
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 配置路由根节点 */}
        <Router>
          {/* 界面跳转链接 */}
          <Link to='/index'>首页</Link>{/* 相当于 a 标签 */}
          <Link to='/product'>产品</Link>
          <Link to='/user'>用户</Link>
          <Link to='/my'>我的</Link>
          {/* 路径和组件之间的关系 */}
          <Route path='/index' exact component={Index}></Route>
          <Route path='/product:id' exact children={()=><Product></Product>}></Route>
          <Route path='/user' exact render={() => 
            <WithUser {...this.props}></WithUser>
          }></Route>
          <Route path='/my' exact component={My}></Route>
          <Route path='/404' exact render={() => <PageNotFind></PageNotFind>}></Route>
          <Redirect to="/404"></Redirect>
        </Router>
      </div>
    )
  }
}
